﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
    <title>china-sail-factory.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/dellstyle/CSSC.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dellstyle/LeftMenu.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dellstyle/CSSC2.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dellstyle/TopMenu.css")" rel="stylesheet" type="text/css" />
    @*气泡提示*@
    <link href="@Url.Content("~/Content/qtip/jquery.qtip.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery.qtip.min.js")" type="text/javascript"></script>
    @*产品展示*@ 
    <link href="@Url.Content("/Content/ProductsShow/css/mycss.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $(".toggle dl dd").hide();
            $(".toggle dl dt").click(function () {
                $(".toggle dl dd").not($(this).next()).hide();
                $(".toggle dl dt").not($(this).next()).removeClass("current");
                $(this).next().slideToggle(800);
                $(this).toggleClass("current");
            });
        });
        $(document).ready(function () {
            $('a[title]').qtip();
        });

        jQuery.fn.loadthumb = function (options) {
            options = $.extend({
                src: ""
            }, options);
            var _self = this;
            _self.hide();
            var img = new Image();
            $(img).load(function () {
                _self.attr("src", options.src);
                _self.fadeIn("slow");
            }).attr("src", options.src);  //.atte("src",options.src)要放在load后面，
            return _self;
        };

        $(function () {
            var i = 5;  //已知显示的<a>元素的个数
            var m = 5;  //用于计算的变量
            var $content = $("#myImagesSlideBox .scrollableDiv");
            var count = $content.find("a").length; //总共的<a>元素的个数
            //下一张
            $(".next").live("click", function () {
                var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv");
                if (!$scrollableDiv.is(":animated")) {  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
                    if (m < count) {  //判断 i 是否小于总的个数
                        m++;
                        $scrollableDiv.animate({ left: "-=50px" }, 600);
                    }
                }
                return false;
            });
            //上一张
            $(".prev").live("click", function () {
                var $scrollableDiv = $(this).siblings(".items").find(".scrollableDiv");
                if (!$scrollableDiv.is(":animated")) {
                    if (m > i) { //判断 i 是否小于总的个数
                        m--;
                        $scrollableDiv.animate({ left: "+=50px" }, 600);
                    }
                }
                return false;
            });

            $(".scrollableDiv a").live("click", function () {
                var src = $(this).find("img").attr("imgb");
                var bigimgSrc = $(this).find("img").attr("bigimg");
                $(this).parents(".myImagesSlideBox").find(".myImgs").loadthumb({ src: src }).attr("bigimg", bigimgSrc);
                $(this).addClass("active").siblings().removeClass("active");
                return false;
            });
            $(".scrollableDiv a:nth-child(1)").trigger("click");

            $(".myTxts a").live("click", function () {
                var bigimgSrc = $(this).parents(".myImagesSlideBox").find(".myImgs").attr("bigimg");
                popZoom(bigimgSrc, "500", "500");
                return false;
            });

            //以新窗口的方式打开图片
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            function popZoom(pictURL, pWidth, pHeight) {
                var sWidth = windowWidth;
                var sHeight = windowHeight;
                var x1 = pWidth;
                var y1 = pHeight;
                var opts = "height=" + y1 + ",width=" + x1 + ",left=" + ((sWidth - x1) / 2) + ",top=" + ((sHeight - y1) / 2) + ",scrollbars=0,menubar=0";
                pZoom = window.open("", "", opts);
                pZoom.document.open();
                pZoom.document.writeln("<html><body bgcolor=\"skyblue\"" + " onblur='self.close();' style='margin:0;padding:0;'>");
                pZoom.document.writeln("<img src=\"" + pictURL + "\" width=\"" + pWidth + "px\" height=\"" + pHeight + "px\">");
                pZoom.document.writeln("</body></html>");
                pZoom.document.close();
            };

            /*关闭遮罩层*/
            $(".closeMyDiv a").live("click", function () {
                $("#MyDiv").empty().hide();
                $("#BigDiv").hide();
                return false;
            }).focus(function () {
                $(this).blur();
                return false;
            });

            /*使用遮罩层*/
            $("#myImagesSlideBox .myImages img").click(function () {
                /*遮罩层居中 和 宽度 高度设置 */
                $("#BigDiv").css({
                    width: $("body").width(),
                    height: ($("body").height() > $("html").height()) ? $("body").height() : $("html").height()
                });
                $("#MyDiv").css({ left: (($(window).width() - 300) / 2), top: (($(window).height() - 390) / 2) });

                var $myDiv = $("#MyDiv").html($("#myImagesSlideBox").html()).show();
                $('<div class="closeMyDiv"><a href="#">关闭</a></div>').prependTo($myDiv);
                $("#BigDiv").show();
                return false;
            });
        });
    </script>
</head>
<body>
    <div class="centertable">
        <table style="width: 100%">
            <tr>
                <td>
                    <img src='@Url.Content("~/content/images/sail-logo.gif")' alt="logo" width="292px" height="58px" />
                </td>
                <td>
                    [Log On]
                </td>
            </tr>
        </table>
    </div>
    @Html.Partial("_TopMenuPartial")
    <div id="application">
        <!-- START CONTENT -->
        <div id="contentWrap">
            <!-- SKIN BOTTOM -->
            <div id="skinBottom">
                <!-- SKIN TOP -->
                <div id="skinTop">
                    <div id="contentOptionalBg">
                        <div id="contentShadow">
                            <div id="content">
                                <div class="pageTools">
                                    <ul id="mastheadToolsLinks" style="list-style-type: none;">
                                        <li class="mastheadToolOrderStatus"><a href="/Order">
                                            <img alt="Status" src="@Url.Content("~/Content/images/c_orderstatus.gif")" style="vertical-align: middle;" />
                                            Order Status</a> </li>
                                        <li class="mastheadToolLogin"><a href="/Customer">
                                            <img alt="Status" src="@Url.Content("~/Content/images/c_profile.gif")" style="vertical-align: middle;" />My
                                            Account</a></li>
                                    </ul>
                                </div>
                                <div id="pagetitle">
                                    <h1 class="cufonGothamBook" id="mastheadPageTitle">
                                        Navigation</h1>
                                </div>
                                <div id="navContent">
                                    <div id="facets" class="browse">
                                        <span id="facetHead">Place Orers</span>
                                    </div>
                                </div>
                                <div id="primaryContent">
                                    <div class="c12" id="sitewideInterstitial">
                                        <div class="wrapper">
                                            <div class="interstitialBody">
                                                <img alt="" src="../../Content/images/icon-rnr.png" title="" /><p class="message">
                                                    TIP! “What if” choices are possible as you can change the seam style and the sizes
                                                    to maximise materialuse and
                                                    <br />
                                                    minimise cost.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="primaryAjaxHook">
                                        <div class="verticalSubsection">
                                            <div id="applicationContent">
                                                <div>
                                                    @Html.Partial("_CustomizeHeadPartial")
                                                    @RenderBody()
                                                </div>
                                                <div class="bottomClear">
                                                </div>
                                            </div>
                                            <div class="bottomClear">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="replacedContent">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END SKIN BOTTOM -->
            </div>
            <!-- END SKIN TOP -->
        </div>
        <!-- END CONTENT -->
    </div>
    <div id="footerSection">
    </div>
</body>
</html>
